<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$cfg_site_name}--{$cfg_site_description}</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link rel="stylesheet" href="{TPL}css/mycoupon.css" type="text/css" media="screen"  />
<link rel="stylesheet" href="{TPL}css/default.css" type="text/css" media="screen"  />
<script language="javascript" src="jquery-1.3.2.js" ></script>
<script language="javascript">
$(function(){
	var timer;
	var i = -1;
	var speed = 2000;//停留秒數
	var alpha=0.7;//說明文底的透明度0~1
	var myItembox = $("#ItemBox ul li a");
 
	$("#showinfo").html($("#ItemBox ul li a").attr("rel"));
	$("#showprice").html($("#ItemBox ul li a").attr("shop_price"));
	$("#showinfobg").css("opacity",alpha);
 
	myItembox.click(function(){		
		var imgfile=$(this).attr("data");
		var imginfo=$(this).attr("rel");
		var gplink =$(this).attr("href");
		var shop_price=$(this).attr("shop_price");
		$("#showimg").attr("src",imgfile);
		$("#gplink").attr("href",gplink);
		$("#showinfo").html(imginfo);
		$("#shop_price").html(shop_price);
		
		i = myItembox.index($(this));
 
		$("#ItemBox ul li").removeClass("on");//remove		
		$(this).parent().addClass("on");//add		
 
		return false;	
	}).hover(function(){//滑入時停止輪播
		clearTimeout(timer);
	}, function(){
		timer = setTimeout(autoShow, speed);
	});
 
	//滑入時停止輪播
	$("#ShowBox").hover(function(){
		clearTimeout(timer);
	}, function(){
		timer = setTimeout(autoShow, speed);
	});
 
	//自動輪播函數
	function autoShow(){
		myItembox.eq(i).css("opacity", alpha);
		if(i+1<myItembox.length){
			i++;
		}else{
			i=0;
		}
		myItembox.eq(i).click();
		myItembox.removeClass("on");
		myItembox.eq(i).parent().addClass("on");
		timer = setTimeout(autoShow, speed);
	}
	//啟動自動輪播
	autoShow();
});
</script>
<link href="reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a{
	outline: none; /* for Firefox */ 
	nlbr:expression(this.onFocus=this.blur()); /* for IE */}
#TopDocBox{width:655px; background-color:#000;padding:5px;}
#ItemBox{width:196px;float:left;}
#ItemBox ul {white-space: nowrap;}
#ItemBox ul li{
	background:url({TPL}images/bg_tit.png) no-repeat left -69px;
	height:46px;
	padding:5px 7px;
	border-bottom:solid 1px #FFFFFF;
}
#ItemBox ul li a{color:#333; line-height:46px;}
#ItemBox ul li.on{background-position:left -126px;}
#ItemBox ul li.on a{
	color:#fff;
	width:152px;
	display: inline-block;
	overflow:hidden;}
 
#ShowBox{
	position:relative;
	float:left;
	width:458px;
	height:335px;
	background-color:#333333;
	overflow:hidden;
}
#showinfobg{
	position:absolute;
	z-index:1;
	bottom:-1px;
	height:90px;
	background-color:#000;
}
#showinfo{ 
	position:absolute;
	z-index:10;
	bottom:0;	
	color:#fff;
	height:70px;
	padding:10px;
}

#logo{ 
	position:absolute;
	background:#fff;
	z-index:10;
}
#Top img{
	width:655px;
	height:137px;
	padding:5px 5px 0px 5px ;
	background:#000;
}
#showinfo b{font-weight:bold;font-size:16px;}
#showinfo a{color:#fff; text-decoration:underline;}
#showinfo a:hover{color:#fff; text-decoration:none;}

</style>

</head>
<body>

	<div id="TopDocBox">
		<div id="ItemBox">
	    	<ul>
	    		{loop $dataarray $key $r}
				{php $link = "view.php?gid=".$r['gid']."&ref=".md5("www.mycoupon.com.tw"."-".$r['gid']) ; }
					<li class="on">
						<a href="{$link}" data="{$r['filepath']}" 
							shop_price="{$r['shop_price']}"
							rel="&lt;b&gt;{$r['title']}&lt;/b&gt; &lt;br /&gt; &lt;span&gt;原價：{$r['market_price']} 特價：&lt;b&gt;{$r['shop_price']}&lt;/b&gt;&lt;a href=&quot;{$link}&quot;&gt;（詳全文）&lt;/a&gt; &lt;/span&gt;"
							>{$r['min_title']}</a></li>
				{/loop}
	        </ul>
	    </div>
	    <div id="ShowBox">
	    	 <div id="showinfo"></div>
	    	 <div id="showinfobg"></div>
	         <a id="gplink" href="#"><img src="#" id="showimg" width="458px" /></a>
	    </div>
	</div>
		
</body>
</html>